<template>
    <div class="warp">
        <div class="login" :style="back">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
                <span class="backIcon" title="回到首页"><a href="/"><i class="el-icon-arrow-left el-icon-back"></i></a></span>
                <h3 class="title">登录</h3>
                <el-form-item prop="userId">
                  <el-input v-model="loginForm.userId" type="text" auto-complete="off" placeholder="用户名" @keyup.enter.native="handleLogin" clearable maxlength="20">
                    <svg-icon slot="prefix" icon-class="user" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" :type="pwdType" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin" maxlength="18">
                        <svg-icon slot="prefix" icon-class="password" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
                    </el-input>
                    <span class="show-pwd" @click="showPwd">
                        <svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'"/>
                    </span>
                </el-form-item>
                <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
                <el-tooltip class="tooltip" placement="top" effect="light">
                    <div slot="content">
                          <p>记住密码注意:</p>
                          <p>*为了您的账号安全，使用记住密码功能需在个人信任的电脑上操作</p>
                    </div>
                    <i class="el-icon-question" style="color:#960303"></i>
                </el-tooltip>
                <el-form-item style="width:100%;">
                  <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin" @keyup.enter.native="handleLogin">
                    <span v-if="!loading">登 录</span>
                    <span v-else>登 录 中...</span>
                  </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import Config from '@/config'
import Cookies from 'js-cookie'
export default {
    name: 'Login',
    data() {
        return {
            back:{
               backgroundImage:"url(" + require("../../../static/bgDark.png") + ")",
            },
            loginForm: {
                userId: '',
                password: '',
                rememberMe: false
            },
            loginRules: {
                userId: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
                password: [{ required: true, trigger: 'blur', message: '密码不能为空' },{
                        min: 6,
                        max: 18,
                        message: '密码长度为6-18位',
                        trigger: 'blur',
                }]
            },
            loading: false,
            redirect: undefined,
            pwdType: 'password',
        }
    },
    watch: {
        $route: {
          handler: function(route) {
            this.redirect = route.query && route.query.redirect
          },
          immediate: true
        }
    },
    created() {
        this.getCookie()
    },
    mounted:function(){
        this.getCookie();
        if (this.loginForm.userId) {
            this.loginForm.rememberMe = true
        }
    },
    methods: {
        showPwd() {
            if (this.pwdType === 'password') {
                this.pwdType = ''
            } else {
                this.pwdType = 'password'
            }
        },
        getCookie() {
            const userId = Cookies.get('userId')
            let password = Cookies.get('password')
            const rememberMe = Cookies.get('rememberMe')
            // 保存cookie里面的加密后的密码
            password = password === undefined ? '' : password
            this.loginForm = {
                userId: userId === undefined ? '' : userId,
                password: password,
                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
            }
        },
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                const user = this.loginForm    //未加密
                const loginParams = { userId: this.loginForm.userId, password: this.$md5(this.loginForm.password),rememberMe:this.loginForm.rememberMe };  //密码加密
                if (valid) {
                    // console.log(loginParams)
                    this.loading = true
                    if (user.rememberMe) {
                        Cookies.set('userId', user.userId, { expires: Config.passCookieExpires })
                        Cookies.set('password', user.password, { expires: Config.passCookieExpires })
                        Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
                    } else {
                        Cookies.remove('userId')
                        Cookies.remove('password')
                        Cookies.remove('rememberMe')
                    }
                    // this.$store.commit('addTest',this.loginForm.userId); 
                    this.$store.dispatch('Login', user).then(() => {
                        // console.log(1)
                        this.loading = false
                        this.$router.push({ path: this.redirect || '/' })
                    }).catch(() => {
                        this.loading = false
                        this.loginForm.password = ''
                        Cookies.remove('password')
                    })
                } else {
                    this.loading = false
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$dark_gray: #889aa4;
.warp{
    // background: #141238;
    height:100%;
    .login {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        // background:url(../../../static/background.svg) 50% no-repeat;
        // background:url(../../../static/bgDark.png);
        background-size: cover;
        .backIcon{
            cursor: pointer;
            padding: 5px 15px 2px 0;
        }
        .title {
            margin: 0px auto 30px auto;
            text-align: center;
            color: #707070;
        }
        .login-form {
            border-radius: 6px;
            background: #ffffff;
            width: 365px;
            padding: 25px 25px 5px 25px;
            box-shadow: 0 1px 6px rgba(0,0,0,.2);
            border-color: #eee;
            .el-input {
                height: 38px;
                input {
                  height: 38px;
                }
            }
            .show-pwd {
                position: absolute;
                right: 10px;
                top: 3px;
                font-size: 16px;
                color: $dark_gray;
                cursor: pointer;
                user-select: none;
            }
        }
    }
}

  
</style>
